<template>
  <div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<!-- <MyHeader :reveice="reveice"/> -->
				<MyHeader @reveice="reveice"/>
				<MyList :todos="items"/>
				<MyFloot :items="items" @allture="allture" @deleteAllChoose="deleteAllChoose"/>
			</div>
		</div>
	</div>
</template>

<script>
import MyList from './components/MyList'
import MyHeader from './components/MyHeader'
import MyFloot from './components/MyFloot'
import pubsub from 'pubsub-js'
export default {
     name:'App',
     components:{
      MyList,
      MyHeader,
      MyFloot
     },
	  data(){
      return {
		//传给list组件
		items: JSON.parse(localStorage.getItem('items')) || []
	  }
   },
   methods: {
	    //传给hearder组件 他发的值就能接收
		reveice(todoone){
             this.items.unshift(todoone)
		},
		
		//设置全部的item的是否选择
		setitems(id){
          this.items.forEach((item) =>{
			if(item.id === id) item.done = !item.done
		  })
		},
		//删除特定的item
		deleteid(_,id){
			this.items = this.items.filter((item) =>{
               return item.id !== id
			})
		},
		//全选
		allture(chooseAll){
			this.items.forEach((item) => item.done = chooseAll)
		},
		//选中的删除
		deleteAllChoose(){
			this.items = this.items.filter((item) =>{return !item.done})
		},
		updatename(id,value){
			console.log(id,value)
			this.items.forEach((item) =>{
			if(item.id === id){
				item.name = value
			}
		})
	  },
   },
   watch:{
	items:{
		deep:true,
        handler(value){
        localStorage.setItem('items',JSON.stringify(value))
		}
	}
   },
   mounted(){
	this.pubid = pubsub.subscribe('deleted',this.deleteid)
    // this.$bus.$on('deleteid',this.deleteid)
	this.$bus.$on('setitems',this.setitems)
	// this.pubid2 = pubsub.subscribe('alter',/*(_,data)=>{
	// 	this.items.forEach((item) =>{
	// 		if(item.id === data.id){
	// 			item.name = data.name
	// 		}
	// 	})
	// 	// this.items.name = this.data.name
	// }*/this.updatename)
	this.$bus.$on('alter',this.updatename)
   },
   beforeDestroy(){
	pubsub.unsubscribe(this.pubid)
    // this.$bus.$off('deleteid')
	this.$bus.$off('setitems')
   }
}

</script>

<style>
/*base*/
	body {
		background: #fff;
	}
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	.btn:focus {
		outline: none;
	}
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>
